<template>
	<view v-if="Object.keys(playlist).length!==0">
		<view class="fixbg" v-if="playlist.coverImgUrl.length" :style="{'backgroundImage':`url(${playlist.coverImgUrl})`}"></view>
		<MusicHeader title="歌单" :icon="true" color="white"/>
		<!-- v-show="!isloding" -->
		<view class="container" v-show="!isloding">
			<scroll-view scroll-y="true">
				<!-- list-head -->
				<view class="ListHeader"> 
					<!-- head-img -->
					<view class="ListHeader-img">
						<image :src="playlist.coverImgUrl" mode=""></image>
						<view class="broadcastC"><text class="iconfont icon-yousanjiao"></text>
						{{playlist.playCount | formatCount}}
						</view>
					</view>
					<!-- head-txt -->
					<view class="ListHeader-text">
						<view>{{playlist.name}}</view>
						<view>
							<image :src="playlist.creator.avatarUrl" mode=""></image>
							<view >
								网易云音乐
							</view>
						</view>
						<view>{{playlist.description}}
						 </view>
					</view>
				</view>
				<!-- 条件编译 有些不支持分享的地方使用 -->

				<!-- head-share -->
				<!-- #ifdef MP-WEIXIN -->
				<button class="list-share" open-type="share">
					<text  class="iconfont icon-fenxiang"></text>
					分享给微信好友
				</button>
				<!-- #endif -->
				
				<view class="SongList">
					<view class="SongList-header">
						<text class="iconfont icon-a-24gf-playCircle"></text>
						<view>播放全部</view>
						<view>（共{{playlist.tracks.length}}首）</view>
					</view>
					
					<view class="SongList-item" v-for="(item,index) in playlist.tracks"  @tap="handletodetailed(item.id)">
						<view class="SongId">{{index+1}}</view>
						<view class="SongList-item-song">
							<view class="SongList-item-song-name">
								{{item.name}}
							</view>
							<view class="SongList-item-singer">
								<image  src="../../static/vip.jpg" mode=""></image>
								<image  src="../../static/sq.jpg" mode=""></image>
								<view>{{item.ar[0].name}}-{{item.name}}</view>
							</view>
						</view>
						<text class="iconfont icon-bofang"></text>
					</view>
					
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import '../../common/iconfont.css'
	import MusicHeader from "../../components/MusicHeader/MusicHeader.vue"
	import {topList} from '../../common/api.js'
	import {list} from '../../common/api.js'
	export default {
		components:{MusicHeader},
		data() {
			return {
				playlist:{},
				// privileges:{},
				isloding:true,
			}
		},
		onLoad(options) {
			// console.log(options.listid)
			uni.showLoading({
				title:'longding'
			})
			// 返回结果
			list(options.listid).then((res)=>{
				if(res[1].data.code===200){
					console.log(res)
					this.playlist = res[1].data.playlist;
					this.$store.commit('INIT_TOPLISTIDS',res[1].data.playlist.trackIds);
					this.isloding=false;
					uni.hideLoading();
				}else{
					uni.showToast({
						title:"请求失败",
						icon:"error"
					})
					setTimeout(()=>{
						uni.navigateBack({
						})
					},1500)
				}
				
			})
		},
		methods: {
			handletodetailed(songid){
				uni.navigateTo({
					url:"../songdedetailed/songdedetailed?songid="+songid
				})
			}
		}
	}
</script>

<style scoped>
	/* list-head */
	.container{
		height: calc(100vh - 160rpx);
	}
.ListHeader{
	display: flex;
	margin: 30rpx;
	}
.ListHeader-img{
	width: 265rpx;
	height: 265rpx;
	border-radius: 30px;
	margin-right: 45rpx;
	position: relative;
	overflow: hidden;
} 
.ListHeader-img image{
	width: 100%;
	height: 100%;
}
.broadcastC{
	position: absolute;
	top:12rpx;
	right: 14rpx;
	color: #FFFFFF;
}
.ListHeader-text{
	width: 360rpx;
	height: 256rpx;
}
.ListHeader-text view:nth-child(1){
	color: #FFFFFF;
	font: 32rpx;
	margin-bottom:35rpx ;
}
.ListHeader-text view:nth-child(2){
	display: flex;
	color: #FFFFFF;
}
.ListHeader-text view:nth-child(2) image{
	width: 55rpx;
	height: 55rpx;
	margin-right:18rpx ;
	border-radius: 55rpx;
}
.ListHeader-text view:nth-child(2) view{
	line-height: 55rpx;
}
.ListHeader-text view:nth-child(3){
	width: 350rpx;
	overflow: hidden;
	height: 100rpx;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	margin-top: 32rpx;
	color:#F1F1F1;
	font-size: 22rpx;
	line-height: 35rpx;
}
/* list-share */
.list-share{
	width: 336rpx;
	height: 70rpx;
	margin:40rpx 208rpx ;
	background-color: rgba(0,0,0,0.4);
	color: #FFFFFF;
	text-align: center;
	line-height: 70rpx;
	font-size: 26rpx;
	border-radius:100rpx;
}
.list-share text{
	height: 70rpx;
	line-height: 70rpx;
	margin-right: 10rpx;
	font-size: 40rpx;
}
/* song-list */
.SongList{
	width: 100%;
	border-radius: 50rpx 50rpx 0 0;
	background-color:#FFFFFF ;
}
.SongList-header{
	display: flex;
	height: 116rpx;
	line-height: 116rpx;

}
.SongList-header text{
	font-size:40rpx ;
	margin:0rpx 25rpx 0rpx 35rpx;
}
.SongList-header view:nth-child(3){
	font-size: 28rpx;
	color: #a1a1a1;
	margin-left:12rpx ;
}
.SongList-header view:nth-child(2){
	font-size:34rpx;
}
.SongList-item{
	display: flex;
	margin: 0 35rpx 0 40rpx;
	align-items: center;
}
.SongId{
	width:50rpx;
	color: #a9a9a9;
	font-size: 35rpx;
	line-height: 120rpx;
}
.SongList-item-song{
	width: 490rpx;
	line-height:rpx;
	margin-left:50rpx;
}
.SongList-item-song-name{
	width: 70vw;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 30rpx;	
}
.SongList-item-singer{
	font-size: 22rpx;
	color: #a9a9a9;
	display: flex;
	align-items: center;
}
.SongList-item-singer view{
	width: 70vw;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.SongList-item-singer image{
	width:32rpx ;
	height: 20rpx;
	margin-right: 10rpx;
}
.SongList-item text{
	font-size: 50rpx;
	color:#a9a9a9;
	
}
</style>
